import React, { useState, useEffect } from 'react';
import { NavLink, useNavigate } from 'react-router-dom';
import { Input, Button, Table, Radio, Switch, message, Modal,Form } from 'antd'
import { addTeamTarget, getOfOrg, getOfTeam, getTeamTarget, patchTeamTarget, patchDoctor, getyears } from '../../../../api/Datas'
import MyForm from '../../../../component/Datas/MyForm';
import './DataPerTeam.scss'
interface Props {

}
const { Search } = Input;
const { confirm } = Modal;
function DataPerTeam(props: Props) {
    var [form] = Form.useForm()
    var [list, setList] = useState([])
    var [option, setOption] = useState([])
    var [ofteam, setOfteam] = useState([])
    var [year, setYear] = useState([])
    var [loading, setLoading] = useState(false)
    const [isModalOpen, setIsModalOpen] = useState(false);
    var [pagination, setPagination] = useState({ current: 1, pageSize: 10, total: 100 })
    // 挂载阶段
    useEffect(() => {
        getList()
        getorglist()
        getteamlist()
        getYear()
        setPagination({
            ...pagination, total: list.length
        })
    }, [list])
    // 获取所属机构列表
    var getorglist = async () => {
        var res = await getOfOrg()
        var arr = res.data.map((item: any) => {
            return { value: item.name, label: item.name }
        })
        setOption(arr)
    }
    // 获取所属团队列表
    var getteamlist = async () => {
        var res = await getOfTeam()
        var arr = res.data.map((item: any) => {
            return { value: item.name, label: item.name }
        })
        setOfteam(arr)
    }
    // 获取年份列表
    var getYear = async () => {
        var res = await getyears()
        var arr = res.data.map((item: any) => {
            return { value: item.name, label: item.name }
        })
        setYear(arr)
    }
    // 获取团队目标列表
    var getList = async () => {
        var res = await getTeamTarget()
        setList(res.data)
    }
    // 表格配置
    // 表格
    const columns = [
        {
            title: '操作',
            dataIndex: 'handle',
            key: 'handle',
            render: (_: any, record: any) => { //动态渲染当前列的数据，和dataIndex有冲突
                return (
                    <>
                        <a onClick={() => { showModal(record) }}>编辑</a>
                    </>
                )
            }
        },
        {
            title: '编号', //表格头的标题
            dataIndex: 'id', //数据索引，决定通过哪个属性名（字段名）获取数据
            key: 'id',
        },
        {
            title: '团队名称',
            dataIndex: 'name',
            key: 'name',
        },
        {
            title: '全年目标',
            dataIndex: 'target',
            key: 'target',
        },
        {
            title: '第一季度',
            dataIndex: 'spring',
            key: 'spring',
            render: (_: any, record: any) => <p>{record.target / 4}</p>
        },
        {
            title: '1月',
            dataIndex: 'one',
            key: 'one',
            render: (_: any, record: any) => <p>{record.target / 12}</p>
        },
        {
            title: '2月',
            dataIndex: 'two',
            key: 'two',
            render: (_: any, record: any) => <p>{record.target / 12}</p>
        },
        {
            title: '3月',
            dataIndex: 'three',
            key: 'three',
            render: (_: any, record: any) => <p>{record.target / 12}</p>
        },
        {
            title: '第二季度',
            dataIndex: 'summer',
            key: 'summer',
            render: (_: any, record: any) => <p>{record.target / 4}</p>
        },
        {
            title: '4月',
            dataIndex: 'four',
            key: 'four',
            render: (_: any, record: any) => <p>{record.target / 12}</p>
        },
        {
            title: '5月',
            dataIndex: 'five',
            key: 'five',
            render: (_: any, record: any) => <p>{record.target / 12}</p>
        },
        {
            title: '6月',
            dataIndex: 'six',
            key: 'six',
            render: (_: any, record: any) => <p>{record.target / 12}</p>
        },
        {
            title: '第三季度',
            dataIndex: 'autumn',
            key: 'autumn',
            render: (_: any, record: any) => <p>{record.target / 4}</p>
        },
        {
            title: '7月',
            dataIndex: 'seven',
            key: 'seven',
            render: (_: any, record: any) => <p>{record.target / 12}</p>
        },
        {
            title: '8月',
            dataIndex: 'eight',
            key: 'eight',
            render: (_: any, record: any) => <p>{record.target / 12}</p>
        },
        {
            title: '9月',
            dataIndex: 'nine',
            key: 'nine',
            render: (_: any, record: any) => <p>{record.target / 12}</p>
        },
        {
            title: '第四季度',
            dataIndex: 'winter',
            key: 'winter',
            render: (_: any, record: any) => <p>{record.target / 4}</p>
        },
        {
            title: '10月',
            dataIndex: 'ten',
            key: 'ten',
            render: (_: any, record: any) => <p>{record.target / 12}</p>
        },
        {
            title: '11月',
            dataIndex: 'eleven',
            key: 'eleven',
            render: (_: any, record: any) => <p>{record.target / 12}</p>
        },
        {
            title: '12月',
            dataIndex: 'twelve',
            key: 'twelve',
            render: (_: any, record: any) => <p>{record.target / 12}</p>
        }
    ]
    var onSearch = async (value: any) => {
        var res = await getTeamTarget({ name_like: value })
        setList(res.data)
    }
    // 显示弹窗
    const showModal = (record:any) => {
        form.setFieldsValue(record)
        setIsModalOpen(true);
    };
    // 弹窗确认
    const handleOk = () => {
        setIsModalOpen(false);
    };
    //弹窗取消
    const handleCancel = () => {
        setIsModalOpen(false);
    };
    // 编辑
    const onFinish = async(values: any) => {
        console.log('Success:', values);
         var res=await patchTeamTarget(values)
         getList()
         message.success({content:'修改成功'})
         handleCancel()
      };
      
      const onFinishFailed = (errorInfo: any) => {
        console.log('Failed:', errorInfo);
      };
       // 分页发生改变后执行
     const handleChange = (pagi: any) => {
        setPagination(pagi) //更新页码
        setLoading(true)
        // 请求新的页码对应的数据
        getTeamTarget().then((res:any) => {
                setLoading(false)
                setPagination({
                    ...pagi, total: res.data.length
                })
  
        })
    }
    return (
        <div className='dataperteam'>
            {/* 顶部第一层 */}
            <div className="top">
            </div>
            <Search placeholder="请输入团队名称关键字"
                onSearch={onSearch}
                style={{ width: 300 }}
                allowClear
            />
            <MyForm list={list} columns={columns} />
            <Modal footer={null} title="编辑" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
                <Form
                form={form}
                    onFinish={onFinish}
                    onFinishFailed={onFinishFailed}
                    
                >
                    <Form.Item name='id' hidden>
                       <Input />
                    </Form.Item>
                    <Form.Item name='name' label='团队名称'>
                        <Input placeholder='请输入团队名称' />
                    </Form.Item>
                    <Form.Item name='target' label='全年目标'>
                        <Input placeholder='请输入全年目标' />
                    </Form.Item>
                    <Form.Item >
                        <Button type="primary" htmlType="submit">提交</Button> &nbsp;&nbsp;
                        <Button onClick={handleCancel}>取消</Button>
                    </Form.Item>
                </Form>
            </Modal>
        </div>
    );
}

export default DataPerTeam;